<template>
  <div class="compare-sort-options-panel">
    <base-panel  class="base-panel"  @click="ShowPanel()" ></base-panel>
    <div  v-show="isShow" id="context_panel" class="context_panel">
      <div  class="CreateButtons">
          <el-button  class="createList">生成数组</el-button>
          <el-button class="sortList">排序</el-button>
          <el-input class="inputList" v-model="input" placeholder="数组长度"></el-input>
          <el-button class="inputListButton">生成</el-button>
        </div>
      <div class="ListButtons">
          <el-button>插入排序</el-button>      
          <el-button>选择排序</el-button> 
          <el-button>冒泡排序</el-button>    
          <el-button>希尔排序</el-button>     
          <el-button>快速排序</el-button>
          <el-button>归并排序</el-button>
        </div>
    </div>
    
      
  </div>
</template>
<script src="./OptionsPanel.js"></script>
<script >
import BasePanel from '../BasePanel.vue'
export default {
  name:'CompareSortOptionsPanel',
  components:{
    BasePanel
  },

  data(){
    return{
      isShow:true,
      
    }

  },
  methods:{
    ShowPanel(){
      this.isShow = !this.isShow
    }
    
  }
  


}
</script>

<style  scoped>
.createList{
  width: 100px;
  height: 40px;
  background: rgb(147, 233, 147);
  position: fixed;
  left: 55px;
  top:75%;
}
.sortList{
  width: 100px;
  height: 40px;
  background: rgb(147, 233, 147);
  position: fixed;
  left: 45px;
  top: 83%;
}
.inputList{
  width: 90px;
  height: 40px;
  position: fixed;
  left: 160px;
  top: 75%;
}
.inputListButton{
  width: 100px;
  height: 40px;
  background: rgb(147, 233, 147);
  position: fixed;
  left: 255px;
  top:75%;
}
.ListButtons{
  float: left;
  width: 650px;
  height: 40px;
  background: rgb(147, 233, 147);
  position: fixed;
  left: 160px;
  top: 83%;
}
</style>